//把theme仓库混入全局css变量中,在App.vue中使用
import { type App, computed } from "vue";
import { useThemeStore } from "@/stores"; const useTheme = (app: App) => {
    const themeStore = useThemeStore();
    const cssVariables = computed(() => {
        return {
            '--theme-color': themeStore.primaryColor,//主题颜色
            '--theme-hover-color': themeStore.themeHoverColor,//主题颜色变浅
            '--aside-bg-color': themeStore.layoutColor.aColor,//侧边栏背景颜色
            '--aside-text-color': themeStore.layoutColor.aTextColor,//侧边栏文字颜色
            '--head-bg-color': themeStore.layoutColor.hColor,//头部背景颜色
            '--head-text-color': themeStore.layoutColor.mTextColor,//头部文字颜色
            '--head-tab-bg-color': themeStore.tabColor,//头部tab背景颜色
            '--main-bg-color': themeStore.layoutColor.mColor,//主体背景颜色
            '--main-text-color': themeStore.layoutColor.mTextColor,//主体文字颜色
            '--border-color': themeStore.borderColor,//边框,线条颜色
            '--table-bg-color': themeStore.tableBgColor,//表格背景颜色
        }
    })
    app.config.globalProperties.$theme = cssVariables;//注意:用的时候再加.value,不然监听不到变化
}
export default useTheme;